<template>
  <view class="ranking-page">
    <!-- 橙色横幅区域 -->
    <view class="ranking-banner">
      <view class="banner-content">
        <view class="store-selector" @click="showActionSheet">
          <text class="store-text">{{ selectBranch }}</text>
        </view>
        <view class="ranking-title">排行榜</view>
        <view class="date-range">{{ dateRange }}</view>
      </view>
    </view>

    <!-- 排行榜列表 -->
    <view class="ranking-list-container">
      <view class="ranking-card">
        <view
          class="ranking-item"
          v-for="(user, index) in rankingList"
          :key="user.id"
          :class="{ 'top-three': index < 3 }"
        >
          <view class="rank-number">{{ index + 1 }}</view>
          <view class="user-avatar">
            <image
              :src="user.avatar"
              mode="aspectFill"
              v-if="user.avatar"
              class="avatar-image"
            />
            <view class="avatar-placeholder" v-else>
              <text class="avatar-text">{{ user.name.charAt(0) }}</text>
            </view>
          </view>
          <view class="user-info">
            <view class="user-name">{{ user.name }}</view>
            <view class="user-score">{{ user.score }}积分</view>
          </view>
          <view class="rank-badge" v-if="index < 3">
            <view class="badge-icon" :class="`badge-${index + 1}`">
              <text v-if="index === 0">🥇</text>
              <text v-else-if="index === 1">🥈</text>
              <text v-else>🥉</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 门店选择弹窗 -->
    <t-action-sheet
      description="切换门店"
      :visible="isShow"
      :items="branches"
      :show-cancel="false"
      @close="onClose"
      @selected="onSelect"
    />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const isShow = ref(false);
const selectBranch = ref("西安店-尖牙tusk");
const dateRange = ref("20251011至20251025");

// 排行榜数据
const rankingList = ref([
  {
    id: 1,
    name: "熬夜王-8520",
    score: 27000,
    avatar: "",
  },
  {
    id: 2,
    name: "XYZ-9052",
    score: 12800,
    avatar: "",
  },
  {
    id: 3,
    name: "都是歪歪的-8897",
    score: 200,
    avatar: "",
  },
  {
    id: 4,
    name: "游戏达人-1234",
    score: 150,
    avatar: "",
  },
  {
    id: 5,
    name: "幸运玩家-5678",
    score: 120,
    avatar: "",
  },
  {
    id: 6,
    name: "新手小白-9999",
    score: 80,
    avatar: "",
  },
  {
    id: 7,
    name: "老司机-7777",
    score: 60,
    avatar: "",
  },
  {
    id: 8,
    name: "菜鸟选手-3333",
    score: 40,
    avatar: "",
  },
]);

const branches = ref([
  { label: "西安店-尖牙tusk", value: "西安店-尖牙tusk" },
  { label: "重庆店-尖牙tusk", value: "重庆店-尖牙tusk" },
  { label: "北京店-尖牙tusk", value: "北京店-尖牙tusk" },
  { label: "上海店-尖牙tusk", value: "上海店-尖牙tusk" },
  { label: "成都店-尖牙tusk", value: "成都店-尖牙tusk" },
]);

const showActionSheet = () => {
  isShow.value = true;
};

const onClose = () => {
  isShow.value = false;
};

const onSelect = (e) => {
  selectBranch.value = e.detail.selected.label;
  isShow.value = false;
};

// 格式化积分显示
const formatScore = (score) => {
  if (score >= 10000) {
    return (score / 10000).toFixed(1) + "万";
  }
  return score.toString();
};

onMounted(() => {
  // 模拟数据加载
  console.log("排行榜数据加载完成");
});
</script>

<style lang="scss">
.ranking-page {
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  background-color: #121212;
  padding-bottom: 120rpx;

  /* 顶部导航栏 */
  .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;
    background-color: #1a1a1a;

    .header-title {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: 500;
    }

    .header-actions {
      display: flex;
      gap: 20rpx;

      .action-icon {
        color: #ffffff;
        font-size: 32rpx;
      }
    }
  }

  /* 橙色横幅区域 */
  .ranking-banner {
    background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
    padding: 40rpx;
    position: relative;

    .banner-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      .store-selector {
        align-self: flex-start;
        margin-bottom: 20rpx;

        .store-text {
          color: #ffffff;
          font-size: 32rpx;
          font-weight: 500;
        }
      }

      .ranking-title {
        color: #8b4513;
        font-size: 60rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .date-range {
        color: #ffffff;
        font-size: 28rpx;
        opacity: 0.9;
      }
    }
  }

  /* 排行榜列表容器 */
  .ranking-list-container {
    flex: 1;
    padding: 0 40rpx;
    margin-top: -40rpx;
    z-index: 10;
    position: relative;

    .ranking-card {
      background-color: #000000;
      border-radius: 20rpx 20rpx 0 0;
      padding: 40rpx 30rpx;
      min-height: 600rpx;

      .ranking-item {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #333333;
        position: relative;

        &:last-child {
          border-bottom: none;
        }

        &.top-three {
          .rank-number {
            color: #ffc300;
            font-weight: bold;
          }

          .user-avatar {
            border: 3rpx solid #ffc300;
          }
        }

        .rank-number {
          color: #ffffff;
          font-size: 48rpx;
          font-weight: bold;
          width: 80rpx;
          text-align: center;
        }

        .user-avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin: 0 30rpx;
          background-color: #333333;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 3rpx solid #666666;

          .avatar-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }

          .avatar-placeholder {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #444444;
            display: flex;
            align-items: center;
            justify-content: center;

            .avatar-text {
              color: #ffffff;
              font-size: 36rpx;
              font-weight: bold;
            }
          }
        }

        .user-info {
          flex: 1;
          display: flex;
          flex-direction: column;

          .user-name {
            color: #ffffff;
            font-size: 32rpx;
            font-weight: 500;
            margin-bottom: 8rpx;
          }

          .user-score {
            color: #ffffff;
            font-size: 24rpx;
            opacity: 0.8;
          }
        }

        .rank-badge {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);

          .badge-icon {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;

            &.badge-1 {
              background-color: #ffd700;
            }

            &.badge-2 {
              background-color: #c0c0c0;
            }

            &.badge-3 {
              background-color: #cd7f32;
            }
          }
        }
      }
    }
  }
}

/* TDesign组件样式覆盖 */
.t-button::after {
  border: none !important;
}

.t-action-sheet__description {
  --td-action-sheet-description-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background-color: #6e4400;
}

.t-action-sheet__list {
  background-color: #3b3b3b;
}

.t-action-sheet__item {
  --td-action-sheet-item-color: #ffffff;
}
</style>
